<template>
  <div class="error" :style="{ backgroundImage: `url(${showText.url})` }">
    <div class="page">
      <div class="content">
        <h1>{{ props.error?.statusCode }}</h1>
        <h2>{{ showText.title }}</h2>
        <p>{{ showText.content }}</p>
        <a @click="aClick">{{ showText.button }}</a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  error: Object,
});

const aClick = () => {
  if (props.error?.statusCode == 404) {
    clearError({ redirect: "/" });
  } else {
    location.reload();
  }
};
const showText = ref({
  title: "",
  content: "",
  button: "",
  url: "",
});
switch (props.error?.statusCode) {
  case 404:
    showText.value = {
      title: "访问的页面不存在",
      content: "页面路径错误，请仔细检测",
      button: "返回首页",
      url: "http://www.supah.it/dribbble/008/008.jpg",
    };
    break;

  case 500:
    showText.value = {
      title: "网站出问题了",
      content: "服务出错了，请重新刷新或联系我",
      button: "刷新",
      url: "http://www.supah.it/dribbble/008/008.jpg",
    };
    break;
  default:
    showText.value = {
      title: "未知的错误",
      content: "我也不知道哪里出错了",
      button: "刷新",
      url: "http://www.supah.it/dribbble/008/008.jpg",
    };
    break;
}
</script>
<style scoped>
.error {
  height: 100vh;
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* background: linear-gradient(0, #202239, #8595ac); */
}

::selection {
  background: #cdd4de;
}

/*--------------------
Page
--------------------*/
.page {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  z-index: 1;
  font-family: Roboto, sans-serif;
  /* background: #0d0c1e; */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
}

/*--------------------
Content
--------------------*/
.content {
  text-align: center;
  padding-top: 58px;
  color: #cdd4de;
}

.content h1 {
  font-weight: 900;
  font-size: 165px;
  line-height: 1;
  margin-bottom: -10px;
  opacity: 0.6;
}

.content h2 {
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 6px;
  opacity: 0.9;
}

.content p {
  font-weight: 300;
  font-size: 14px;
  opacity: 0.7;
  margin-bottom: 70px;
}

.content a {
  display: inline-block;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  border: 1px solid #cdd4de;
  padding: 8px 14px;
  border-radius: 4px;
  opacity: 0.4;
  cursor: pointer;
  margin-bottom: 70px;
}
</style>
